<script setup lang="ts">
import { ref } from "vue";
import WebExcel from "./../../../src/index"
import useTable from "./useTable";
const { columns, dataSource } = useTable(100)

const fns = ref<any>({showIndex: true})
</script>

<template>
    <h4>默认行态</h4>

    
    <a-checkbox v-model:checked="fns.showIndex">显示行号</a-checkbox>
    <a-checkbox v-model:checked="fns.disabled">全部行禁用</a-checkbox>
    <a-checkbox v-model:checked="fns.readonly">全部行只读</a-checkbox>
    <a-checkbox @change="() => fns.selectUnit = fns.selectUnit != 'row' ? 'row' : 'cell'">最小选择范围：行</a-checkbox>
    <p></p>
    
    <WebExcel :columns="columns" :dataSource="dataSource" v-bind="fns" style="height: 40vh;" >
    </WebExcel>
    <!-- <p style="font-size: 0.8rem;display: flex;flex-wrap: wrap;">
        <ul v-for="row of dataSource">
        <li v-for="(value, key) in row"> {{ key }} : {{ value }}</li>
        </ul>
    </p> -->
</template>